/**
 *通用形列表-列表部分
 */
<template> 
    <el-table-column 
        v-for="(item, index) in props.tableColumn"
        :key="`${item.tableLabel}-${index}`"
        :prop="item.tableProp" 
        :label="item.tableLabel" 
        :width="item.tableWidth" 
        :min-width="item.tableMinWidth" 
        :show-overflow-tooltip="item.tableShowOverflowTooltip"
        :fixed="item.tableFixed"
        :type="item.tableType"
        :align="item.tableAlign"
        :header-align="item.tableHeaderAlign"
        :selectable="item.tableSelectable"
        :sortable="item.tableSortable"
        :formatter="item.tableFormatter"
        :filters="item.tableFilters"
        :filter-method="item.tableFilterMethod"
        :filter-placement="item.tableFilterPlacement"
        :index="item.tableIndex"

    >
        <template v-slot:default="scope">
            <!-- 很离谱，下面两个都得加v-if才行 -->
            <template v-if="item.tableChildren?.length > 0">
                <GeneralTabelListColumn 
                    v-if="item.tableChildren?.length > 0"
                    :key="`${item.tableLabel}-children-${index}`"
                    :tableColumn="item.tableChildren"
                />
            </template>
            <!-- 判断不同情况 -->
            <!-- <div v-if="scope.row[item.tableProp]">{{ scope.row[item.tableProp] }}</div> -->
            <!-- 按钮内容 -->
            <template v-else-if="item.tableContentType == 'button'">
                <el-button 
                    v-for="(item2, index2) in item.tableContentButtons"
                    :type="item2.tableContentButtonType" 
                    :plain="item2.tableContentButtonPlain"
                    :round="item2.tableContentButtonRound"
                    :circle="item2.tableContentButtonCircle"
                    :icon="item2.tableContentButtonIcon"
                    :disabled="item2.tableContentButtonDisabled"
                    :text="item2.tableContentButtonText"
                    :link="item2.tableContentButtonLink"
                    :bg="item2.tableContentButtonBg"
                    :loading="item2.tableContentButtonLoading"
                    :loading-icon="item2.tableContentButtonLoadingIcon"
                    :color="item2.tableContentButtonColor"
                    :dark="item2.tableContentButtonDark"
                    @click.stop="item2.tableContentButtonClick(scope)"
                >
                    {{ item2.tableContentButtonMainText }}
                </el-button>
            </template>

        </template>
        
    </el-table-column>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import { isPhone } from '@/utils/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        CaretTop,
        CaretBottom,
    } from '@element-plus/icons-vue'
    import GeneralTabelListColumn from './GeneralTabelListColumn.vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    // const tableObj = defineModel<any>('tableObj', {
    //     required: false,
    //     default: {
    //         tableData: [],
    //         tableColumn: [],
    //     }
    // })
    const props = withDefaults(defineProps<{
        tableColumn?: any[], 
    }>(), {
        tableColumn: () => [],
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        // 'tabelSearch': [data: any]
    }>()
    
    
</script>

<style lang="scss" scoped>
    .my-table {
        width: 100%
    }
    // tableRowClassName写的自定义样式
    .my-table :deep(.warning-row) {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .my-table :deep(.success-row ) {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
    
</style>